<!-- public/index.html -->
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>HLS 播放器</title>
    <style>
      body {
        font-family: Arial;
        padding: 20px;
      }
      video {
        width: 100%;
        max-width: 800px;
      }
      button {
        padding: 10px;
        margin-right: 10px;
        margin-bottom: 10px;
      }
      .network-monitor {
        margin-top: 20px;
        padding: 15px;
        background-color: #f0f8ff;
        border-radius: 5px;
        border-left: 4px solid #3498db;
      }
      .speed-value {
        font-size: 28px;
        font-weight: bold;
        color: #27ae60;
      }
    </style>
  </head>
  <body>
    <h1>HLS 播放器</h1>
    <div>
      <button onclick="playVideo()">开始播放视频</button>
      <button onclick="testSpeed()">测试网速</button>
    </div>
    <video width="800" height="450" id="video" controls autoplay></video>

    <div class="network-monitor">
      <h3>
        网速:
        <span class="speed-value" id="currentSpeed">0 kb/s</span>
      </h3>
    </div>

    <script src="/js/hls.js"></script>
    <script>
      const playlistUrl = "/adaptive/input1/stream_1280_720/index.m3u8"
      const video = document.getElementById("video")
      const currentSpeedElement = document.getElementById("currentSpeed")
      let hls
      let speedTestTimer = null
      let realTimeTimer = null
      let isTestRunning = false
      let lastSpeedUpdate = 0
      let speedHistory = []
      
      // 格式化速度（显示kb/s）
      function formatSpeed(bps) {
        if (!bps || isNaN(bps) || bps <= 0) {
          return "0 kb/s"
        }

        // 转换为kb/s并保留整数
        return Math.round(bps / 1000) + " kb/s"
      }

      // 更新速度显示（带防抖动）
      function updateSpeedDisplay(speedBps) {
        const now = Date.now()

        // 添加到历史记录
        speedHistory.push({ speed: speedBps, time: now })

        // 保持最近5秒的历史记录
        speedHistory = speedHistory.filter(item => now - item.time < 5000)

        // 计算平均速度（平滑显示）
        if (speedHistory.length > 0) {
          const avgSpeed = speedHistory.reduce((sum, item) => sum + item.speed, 0) / speedHistory.length
          currentSpeedElement.textContent = formatSpeed(avgSpeed)
        }

        lastSpeedUpdate = now
      }
      
      // 简单的网速测试 - 下载一个文件并测量速度
      function testSpeed() {
        if (isTestRunning) return
        
        isTestRunning = true
        currentSpeedElement.textContent = "测试中..."
        
        // 使用当前时间戳避免缓存
        const testUrl = `/js/hls.js?t=${Date.now()}`
        const startTime = performance.now()
        
        fetch(testUrl)
          .then(response => {
            // 创建一个reader来读取响应流
            const reader = response.body.getReader()
            let receivedBytes = 0
            let lastUpdateTime = startTime
            
            // 处理数据流
            function processStream({ done, value }) {
              // 如果完成，计算总速度
              if (done) {
                const endTime = performance.now()
                const totalTime = (endTime - startTime) / 1000
                const speedBps = Math.round((receivedBytes * 8) / totalTime)
                
                updateSpeedDisplay(speedBps)
                isTestRunning = false
                return
              }
              
              // 累计接收到的字节数
              receivedBytes += value.length
              
              // 计算当前速度并更新显示（每200ms更新一次）
              const now = performance.now()
              if (now - lastUpdateTime > 200) {
                const elapsedTime = (now - startTime) / 1000
                const currentSpeed = Math.round((receivedBytes * 8) / elapsedTime)
                
                updateSpeedDisplay(currentSpeed)
                lastUpdateTime = now
              }
              
              // 继续读取流
              return reader.read().then(processStream)
            }
            
            // 开始处理流
            return reader.read().then(processStream)
          })
          .catch(error => {
            console.error("测速失败:", error)
            currentSpeedElement.textContent = "测试失败"
            isTestRunning = false
          })
      }
      
      // 从HLS播放器获取网速
      function getHlsSpeed() {
        if (hls && hls.stats && hls.stats.bw > 0) {
          const speed = hls.stats.bw
          updateSpeedDisplay(speed)
          return true
        }
        return false
      }

      // 实时网速监控
      function startRealTimeMonitoring() {
        // 清除之前的实时监控定时器
        if (realTimeTimer) {
          clearInterval(realTimeTimer)
        }

        // 每500ms检查一次HLS统计数据
        realTimeTimer = setInterval(() => {
          if (!isTestRunning && hls) {
            // 尝试从HLS获取实时速度
            if (hls.bandwidthEstimate && hls.bandwidthEstimate > 0) {
              updateSpeedDisplay(hls.bandwidthEstimate)
            } else if (hls.stats && hls.stats.bw > 0) {
              updateSpeedDisplay(hls.stats.bw)
            }
          }
        }, 500)
      }
      
      // 定期更新网速（优化版本）
      function startSpeedUpdates() {
        // 清除之前的定时器
        if (speedTestTimer) {
          clearInterval(speedTestTimer)
        }

        // 启动实时监控
        startRealTimeMonitoring()

        // 立即进行一次测速
        testSpeed()

        // 每3秒更新一次网速（提高频率）
        speedTestTimer = setInterval(() => {
          const now = Date.now()

          // 如果最近1秒内没有更新过速度，则进行测速
          if (now - lastSpeedUpdate > 1000 && !isTestRunning) {
            // 如果视频正在播放，优先尝试从HLS获取速度
            if (!video.paused) {
              if (!getHlsSpeed()) {
                testSpeed()
              }
            } else {
              // 视频未播放时进行独立测速
              testSpeed()
            }
          }
        }, 3000) // 从10秒改为3秒
      }

      // 初始化 HLS 播放器
      if (Hls.isSupported()) {
        hls = new Hls({
          startLevel: -1, // 自动选择初始级别
          abrEwmaDefaultEstimate: 1000000, // 默认带宽估计
          abrEwmaFastLive: 3.0,
          abrEwmaSlowLive: 9.0,
          maxStarvationDelay: 4,
          maxLoadingDelay: 4
        })

        hls.attachMedia(video)

        // 监听事件
        hls.on(Hls.Events.MANIFEST_PARSED, function () {
          video.play()
        })
        
        // 监听片段加载进度，用于获取网速（优化版本）
        hls.on(Hls.Events.FRAG_LOAD_PROGRESS, function(event, data) {
          if (data && data.stats) {
            const stats = data.stats
            const loaded = stats.loaded
            const timeLoaded = stats.loading.first - stats.loading.start

            if (timeLoaded > 0 && loaded > 0) {
              const speedBps = Math.round((loaded * 8) / (timeLoaded / 1000))
              updateSpeedDisplay(speedBps)
            }
          }
        })

        // 监听片段加载完成事件
        hls.on(Hls.Events.FRAG_LOADED, function(event, data) {
          if (data && data.stats) {
            const stats = data.stats
            const totalBytes = stats.total
            const totalTime = stats.loading.end - stats.loading.start

            if (totalTime > 0 && totalBytes > 0) {
              const speedBps = Math.round((totalBytes * 8) / (totalTime / 1000))
              updateSpeedDisplay(speedBps)
            }
          }
        })

        // 监听级别切换事件，获取带宽估计
        hls.on(Hls.Events.LEVEL_SWITCHED, function(event, data) {
          if (hls.bandwidthEstimate && hls.bandwidthEstimate > 0) {
            updateSpeedDisplay(hls.bandwidthEstimate)
          }
        })
      }

      // 播放视频
      function playVideo() {
        if (hls) {
          hls.loadSource(playlistUrl)
        } else if (video.canPlayType("application/vnd.apple.mpegurl")) {
          video.src = playlistUrl
        }
      }

      // 页面加载完成后自动开始监控网速
      window.addEventListener("load", function () {
        startSpeedUpdates()
      })

      // 页面卸载前清除资源
      window.addEventListener("beforeunload", function () {
        if (speedTestTimer) {
          clearInterval(speedTestTimer)
        }
        if (realTimeTimer) {
          clearInterval(realTimeTimer)
        }
      })
    </script>
  </body>
</html>
